<template>
	<div style="padding-bottom: 44px">
		<div class="center-match-banner"></div>
		<div style="background-color: #fff">
			<ul class="link-tab">
				<li v-for="(link, index) in links" :key="index" :class="index == active ? 'active' : ''" @click="goLink(index)">{{ link.name }}</li>
			</ul>
		</div>
		<div>
			<div id="link1"></div>
			<div class="match-title"><img src="/static/images/centre_introduce.png" /></div>
			<div style="margin:40px auto 0;width: 1240px"><FullCalendar :options="calendarOptions" id="calendar" /></div>
		</div>
		<div id="link2"></div>
		<div class="match-title"><img src="/static/images/centre_map.png" /></div>
		<div class="match-card">
			<img :src="huichangditu.httpimage" style="width: 100%;">
		</div>
	</div>
</template>
<script>
import { goAnchor } from '@/util';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import {huichangdaolan} from '../../api/cms.js'

export default {
	components: {
		FullCalendar
	},
	data() {
		return {
			huichangditu:{},
			richenglist:{},
			active: 0,
			links: [{ path: '/match_center', name: '大赛日程' }, { path: '/match_center', name: '会场地图' }],
			events: null,
			calendarOptions: {
				plugins: [dayGridPlugin, interactionPlugin],
				initialView: 'dayGridMonth',
				headerToolbar: {
					left: 'prev,next',
					center: 'title',
					right: ''
				},
				locale: 'zh-cn',
				initialDate: '2021-07-12',
				firstDay: 0,
				events: [
					{
						title: '2021中国（郑州）国机智能网联汽车大赛启幕式',
						start: '2021-07-06',
						end: '2021-07-09',
						color: '#00ffff',
						textColor: '#000',
						className: 'event-radius'
					},
					{
						title: '2021世界车联网创新挑战赛启幕式',
						start: '2021-07-15',
						end: '2021-07-16',
						color: '#f957fd',
						className: 'event-radius'
					},
					{
						title: '世界车联网论坛',
						start: '2021-07-28',
						color: '#f957fd',
						className: 'event-radius'
					}
				],
				eventRender: function(event, element) {
					console.log(event, element);
				}
			}
		};
	},
	created() {
		huichangdaolan()
		  .then((res) => {
			this.huichangditu=res.data.data.huichangditu
			this.richenglist=res.data.data.richenglist
		
			console.log();
		  })
		  .catch((res) => {
		    console.log(res);
		  });
	},
	mounted() {
		this.events = window.addEventListener('scroll', this.handle);
	},
	methods: {
		handle() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			var link1 = document.querySelector('#link1').offsetTop;
			var link2 = document.querySelector('#link2').offsetTop;
			var list = [{ index: 0, numer: Math.abs(scrollTop - link1 + 84) }, { index: 1, numer: Math.abs(scrollTop - link2 + 84) }];
			list.sort((a, b) => a.numer - b.numer);
			this.active = list[0].index;
		},
		goLink(index) {
			this.active = index;
			goAnchor(`#link${index + 1}`);
		}
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handle);
		this.events = null;
	}
};
</script>
<style scoped>
.center-match-banner {
	width: 100%;
	background-image: url(/static/images/centre_banner.png);
	background-repeat: no-repeat;
	height: 472px;
	background-size: cover;
	min-width: 1440px;
}
.match-title {
	width: 1240px;
	margin: 84px auto 0;
	padding-left: 24px;
	padding-top: 10px;
	background: url(/static/images/match_line.png) no-repeat;
	background-position: right bottom;
	height: 124px;
}
.match-card {
	margin: 40px auto 0;
	border-radius: 25px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
	width: 1240px;
	min-height: 406px;
	background-image: url(/static/images/match_card.png);
	background-size: 100% auto;
	background-position: right center;
	padding: 55px 50px;
	font-size: 16px;
	color: #000000;
	line-height: 30px;
}
.match-margin-bg {
	background-color: rgb(1, 67, 160);
	width: 100%;
	height: 304px;
	margin: 109px 0 74px;
}
.center-match-bg {
	background: url(/static/images/match_bg.png) no-repeat;
	background-position: center 12%;
	background-size: 100% auto;
}
</style>
